<style>
.changeInfo{
	/* display: flex;
	flex: 1; */
	width: 100%;
	background: #f5f5f5;
}
.changeInfo .uni-list{
	margin-top: 30px;
	display: flex;
	/* flex: 1; */
}
.changeInfo .uni-list:before {
    background-color: #fff;
}
.cell{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
}
.uni-navigate-right .cell{
	padding-right: 20upx;
}
.cell image{
	width: 120upx;
	height: 120upx;
}
.mask{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 11;
	background: rgba(0,0,0,0.5);
}
.mask-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 12;
	background: #fff;
	width: 80%;
	text-align: center;
	padding: 30px 0 0 0;
	border-radius: 5px;
}
.mask-box .name{
	margin: 30upx 0;
	/* border-bottom: 1px solid #BEBEBE; */
}
.btn-box{
	display: flex;
	flex: 1;
	justify-content: space-between;
	border-top: 1upx solid #eee;
}
.btn-box text{
	display: flex;
	flex: 1;
	justify-content: center;
	padding: 20px 0 20px 0;
}
.confirm{
	color:#007AFF;
	border-left: 1upx solid #eee;
}
.company{
	padding: 50upx 30upx;
	text-align: center;
	font-size: 28upx;
	color: #777;
}
</style>
<template>
	<view class="changeInfo">
		<view class="mask" v-if="maskShow" @click="cancel">
			<view class="mask-box" @click.stop>
				<view class="mask-title">请输入姓名</view>
				<input type="text" class="name" v-model="nameTemp" />
				<view class="btn-box">
					<text @click="cancel">取消</text>
					<text class="confirm" @click="confirm">确定</text>
				</view>
			</view>
		</view>
		<view class="mask" v-if="seleAddrShow" @click="seleAddrCancel">
			<view class="mask-box" @click.stop>
				<view class="mask-title">请输入地址</view>
				<input type="text" class="name" v-model="addressTemp" />
				<view class="btn-box">
					<text @click="seleAddrCancel">取消</text>
					<text class="confirm" @click="confirmAddress">确定</text>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate ">
					<view class="cell" @click="seleImg">
						<view>头像</view>
						<image @click.stop="preview" :src="avator" mode=""></image>
					</view>
				</view>
			</view>
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view class="cell" @click="seleName">
						<view>姓名</view>
						<view class="tr">{{name}}</view>
					</view>
				</view>
			</view>
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view class="cell" @click="seleAddr">
						<view>地址</view>
						<view class="tr">{{address}}</view>
					</view>
				</view>
			</view>
		</view>
		<div class="company">Copyright © 2018-2019 河北骑享多科技有限公司 All Rights Reserved</div>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				maskShow:false,
				seleAddrShow:false,
				name:'',
				nameTemp:'',
				avator:'',
				address:'',
				addressTemp:''
			};
		},
		computed: {
		    ...mapState(['hasLogin', 'forcedLogin','userInfo'])
		},
		mounted() {
			let userInfo = JSON.parse(JSON.stringify(this.userInfo))
			this.name = userInfo.name
			let headurl = this.userInfo.headurl
			this.address = this.userInfo.address ? this.userInfo.address : ''
			this.avator = headurl ? headurl : '../../../static/img/logo2.jpg'
		},
		methods:{
			...mapMutations(['setAvator','setName','setAddress']),
			preview(){
				let that = this
				uni.previewImage({
					urls: [that.avator]
				});
			},
			confirm(){
				let that = this
				uni.request({
					url: this.httpUrl + 'user/save',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid:that.userInfo.uid,
						name:that.nameTemp
					},
					success: (res) => {
						// console.log(res.data.code)
						that.maskShow = false
						if (res.data.code == 1) {
							that.name = that.nameTemp
							that.setName(that.name)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			seleImg(){
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url: 'http://59.110.234.118:9100/uploadImgs/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								// console.log(JSON.parse(uploadFileRes.data));
								let img = JSON.parse(uploadFileRes.data).data
								that.uploadAvator(img)
							}
						});
					}
				});
			},
			uploadAvator(headurl){
				let that = this
				uni.request({
					url: this.httpUrl + 'user/save',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid:that.userInfo.uid,
						headurl:headurl
					},
					success: (res) => {
						// console.log(res.data.code)
						if (res.data.code == 1) {
							that.setAvator(headurl)
							console.log(that.userInfo.headurl)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			seleName(){
				this.nameTemp = JSON.parse(JSON.stringify(this.name))
				this.maskShow = true
			},
			cancel(){
				this.maskShow = false
			},
			seleAddr(){
				this.addressTemp = JSON.parse(JSON.stringify(this.address))
				this.seleAddrShow = true
			},
			seleAddrCancel(){
				this.seleAddrShow = false
			},
			confirmAddress(){
				let that = this
				uni.request({
					url: this.httpUrl + 'user/save',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid:that.userInfo.uid,
						address:that.addressTemp
					},
					success: (res) => {
						// console.log(res.data.code)
						that.seleAddrShow = false
						if (res.data.code == 1) {
							that.address = that.addressTemp
							that.setAddress(that.address)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			}
		}
	}
</script>
